<template>
  <div class="header_item rotate" style="width: auto; padding-left: 10px">
    <el-dropdown>
      <div class="avatar_box">
        <el-avatar
          :size="40"
          :src="userInfo.avatar"
        />
        <div>{{ userInfo.name }}</div>
        <svg class="iconpark-icon"><use href="#right"></use></svg>
      </div>
      <template #dropdown>
        <el-dropdown-item @click.native="goIndex()">首页</el-dropdown-item>
        <el-dropdown-item @click.native="open()">个人中心</el-dropdown-item>
        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
      </template>
    </el-dropdown>
  </div>
</template>
<script>
import {mapGetters} from "vuex";

export default {
  methods: {
    open() {
      this.$router.push('/user/admin/userInfo');
    },
    goIndex(){
      this.$router.push('/');
    },
    logout() {
      this.$confirm("确定要推出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            this.$router.push("/login");
          });
        })
        .catch(() => {
          return;
        });
    },
  },
  created() {
    this.$store.dispatch("GetUserInfo")
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
};
</script>
